<template>
  <view>
    <view class="u-p-24">
      <view class="top-card">
        <view class="flex-col">
          <view style="font-size: 28rpx;">
            可用积分
          </view>
          <view style="font-size: 48rpx;">
            12345
          </view>
        </view>

        <image class="jfsc" src="../../static/icons/jfsc.png" @click="$goto('/pages/home/jifen')"></image>
      </view>

      <u-tabs :list="tabs" :is-scroll="false" :current="current" @change="change" inactive-color="#999999" active-color="#F6AD3C" bg-color="transparent"></u-tabs>

      <view class="list">
        <view class="flex-row justify-between align-center" v-for="i in 5" :key="i">
          <view class="name" style="color: #666666;">购物</view>
          <view class="date" style="color: #C3C3C3;">2019-11-11</view>
          <view class="change" style="color: #FF4E4E;">+12</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        tabs: [{
            name: '收入'
          },
          {
            name: '支出'
          }
        ],
        current: 0,
      };
    },
    methods: {
      change(index) {
        this.current = index;
      },
    }
  }
</script>

<style lang="scss">
  .top-card {
    width: 702rpx;
    height: 230rpx;
    border-radius: 24rpx;
    background: #f6ad3c;
    padding: 40rpx 24rpx;
    display: flex;
    justify-content: space-between;
    color: #fff;
    align-items: flex-end;
  }

  .jfsc {
    width: 180rpx;
    height: 70rpx;
  }

  .list {
    background: #fff;
    margin: 24rpx 0;
    border-radius: 24rpx;

    .flex-row {
      padding: 24rpx;
      border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    }
  }
</style>
